{% extends "personal_center/base.html" %}
{% load state_display %}
{% block page_link %}
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <script src="../../static/personal_center/js/echarts.js"></script>
    <link href="../../static/personnel/css/jquery.searchableSelect.css" rel="stylesheet" type="text/css">
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div style="width: 100%;height: 40px;line-height: 40px;border-bottom: #cfcfcf solid 1px;background: white;padding-left: 15px;">
        <div style="display: inline-block;vertical-align: top;width: 200px;height: 40px;">
            <select name="" id="year" style="width: 100%;height: 30px;margin-top: 5px;border: #E6E6E6 solid 1px;border-radius: 3px;outline: none;" class="dept_select">
                <option value="{{ year_num }}">{{ year_num }}</option>
                {% for year in year_list %}
                    {% if year_num|add_quotes != year|add_quotes %}
                        <option value="{{ year }}">{{ year }}</option>
                    {% endif %}

                {% endfor %}
            </select>
        </div>
        <div style="display: inline-block;vertical-align: top;width: 200px;height: 40px;">
            <select name="" id="month" style="width: 100%;height: 30px;margin-top: 5px;border: #E6E6E6 solid 1px;border-radius: 3px;outline: none;" class="dept_select">
                <option value="{{ month }}">{{ month }}</option>
                {% for yf in yf_list %}
                    {% if month|add_quotes != yf|add_quotes %}
                        <option value="{{ yf }}">{{ yf }}</option>
                    {% endif %}
                {% endfor %}
            </select>
        </div>
        <div style="display: inline-block;vertical-align: top;width: 250px;height: 40px;">
{#            <div id="selectDemo" class="xm-select-demo" style="width: 100%;height: 30px;margin-top: 5px;"></div>#}
            <select name="dept" style="width: 250%;margin-top: 5px;height:30px;z-index: 100;" id="dept" class="dept_select">
                <option value="{{ dept_id }}">{{ dept }}</option>
                {% for dep_dict in dep_dict_list %}
                    {% if dept_id|add_quotes != dep_dict.value|add_quotes %}
                        <option value="{{ dep_dict.value }}">{{ dep_dict.name }}</option>
                    {% endif %}
                {% endfor %}

            </select>
        </div>

        <div style="display: inline-block;vertical-align: top;width: 250px;height: 40px;">
            <button style="width: 100px;height: 32px;margin-top: 4px;border: #00a0e9 solid 1px;background: #00a0e9;color: white;line-height: 20px;border-radius: 3px;" onclick="search_data()">
                <i class="iconfont icon-chaxun" style="color: white;" ></i> 搜索
            </button>
        </div>

        <span style="float: right;margin-right: 15px;">
            <a href="#" onclick="to_detail()"><i class="iconfont icon-gengduo1" style="color: #00a0e9;"></i> 详情</a>
        </span>
    </div>

    <div style="width: 100%;height: 95%;overflow: auto;">
        <div style="width: 98.5%;height: 24%;border: #cfcfcf solid 1px;background: white;margin-left: 0.8%;margin-top: 5px;">
            <div style="background-image: url('../../static/personnel/img/4.jpeg');width: 23%;height: 75%;margin-top: 25px;display: inline-block;vertical-align: top;margin-left: 2%;color: white;">
                <div style="width: 100%;height: 20%;line-height: 40px;padding-left: 5%;">议题总数</div>
                <div style="width: 100%;height: 60%;line-height: 90px;font-size: 40px;padding-left: 25%;"><strong><span>{{ total_number }}</span> 个</strong></div>
                <div style="width: 100%;height: 20%;line-height: 20px;padding-left: 5%;">总完结率：<span>{{ total_completion_rate }}</span>%</div>
            </div>

            <div style="background-image: url('../../static/personnel/img/2.jpeg');width: 23%;height: 75%;margin-top: 25px;display: inline-block;vertical-align: top;margin-left: 1%;color: white;">
                <div style="width: 100%;height: 20%;line-height: 40px;padding-left: 5%;">院长办公会议题</div>
                <div style="width: 100%;height: 60%;line-height: 90px;font-size: 40px;padding-left: 25%;"><strong><span>{{ yb_count }}</span> 个</strong></div>
                <div style="width: 100%;height: 20%;line-height: 20px;padding-left: 5%;">完结率：<span>{{ yb_completion_rate }}</span>%</div>
            </div>

            <div style="background-image: url('../../static/personnel/img/1.jpeg');width: 23%;height: 75%;margin-top: 25px;display: inline-block;vertical-align: top;margin-left: 1%;color: white;">
                <div style="width: 100%;height: 20%;line-height: 40px;padding-left: 5%;">党委会议题</div>
                <div style="width: 100%;height: 60%;line-height: 90px;font-size: 40px;padding-left: 25%;"><strong><span>{{ db_count }}</span> 个</strong></div>
                <div style="width: 100%;height: 20%;line-height: 20px;padding-left: 5%;">完结率：{{ db_completion_rate }}%</div>
            </div>

            <div style="background-image: url('../../static/personnel/img/3.jpeg');width: 23%;height: 75%;margin-top: 25px;display: inline-block;vertical-align: top;margin-left: 1%;color: white;">
                <div style="width: 100%;height: 20%;line-height: 40px;padding-left: 5%;">行政例会议题</div>
                <div style="width: 100%;height: 60%;line-height: 90px;font-size: 40px;padding-left: 25%;"><strong><span>{{ xz_count }}</span> 个</strong></div>
                <div style="width: 100%;height: 20%;line-height: 20px;padding-left: 5%;">完结率：{{ xz_completion_rate }}%</div>
            </div>
        </div>

        <div style="width: 100%;height: 65%;margin-top: 10px;">
            <div style="width: 33%;height: 100%;border: #cfcfcf solid 1px;background: white;display: inline-block;vertical-align: top;margin-left: 12px;">
                <div style="width: 100%;height: 35px;line-height: 35px;padding-left: 10px;border-bottom: #cfcfcf solid 1px;background: #BFEFFF;">
                    议题占比统计
                </div>
                <div style="width: 100%;height: 60%;text-align: center;">
                    <div id="container" style="height: 100%"></div>
                </div>
                <div style="width: 100%;">
                    <table style="width: 100%;text-align: center;">
                        <tr style="height: 35px;line-height: 35px;background: #00a0e9;color: white;width: 100%;">
                            <th style="width: 33.3%;border: #cfcfcf solid 1px;border-left: none;">院长办公会议题</th>
                            <th style="width: 33.3%;border: #cfcfcf solid 1px;">党委会议题</th>
                            <th style="width: 33.3%;border: #cfcfcf solid 1px;border-right: none;">行政例会议题</th>
                        </tr>
                        <tr style="height: 35px;line-height: 35px;color: #1c2838;width: 100%;">
                            <th style="width: 33.3%;border: #cfcfcf solid 1px;border-left: none;">{{ yb_count }}</th>
                            <th style="width: 33.3%;border: #cfcfcf solid 1px;">{{ db_count }}</th>
                            <th style="width: 33.3%;border: #cfcfcf solid 1px;border-right: none;">{{ xz_count }}</th>
                        </tr>
                        <tr style="height: 35px;line-height: 35px;color: #1c2838;width: 100%;">
                            <th style="width: 33.3%;border: #cfcfcf solid 1px;border-left: none;">占比{{ total_proportion.yb_total_proportion }}%</th>
                            <th style="width: 33.3%;border: #cfcfcf solid 1px;">占比{{ total_proportion.db_total_proportion }}%</th>
                            <th style="width: 33.3%;border: #cfcfcf solid 1px;border-right: none;">占比{{ total_proportion.xz_total_proportion }}%</th>
                        </tr>
                    </table>
                </div>
            </div>

            <div style="width: 65%;height: 100%;border: #cfcfcf solid 1px;background: white;display: inline-block;vertical-align: top;margin-left: 5px;">
                <div style="width: 100%;height: 35px;line-height: 35px;padding-left: 10px;border-bottom: #cfcfcf solid 1px;background: #BFEFFF;">
                    议题月份议题数统计
{#                    <span style="float: right;margin-right: 15px;">#}
{#                        <a href="#"><i class="iconfont icon-gengduo1" style="color: #00a0e9;"></i> 详情</a>#}
{#                    </span>#}
                </div>
                <div style="width: 100%;height: 43%;text-align: center;">
                    <div id="IssuesNumber" style="height: 100%"></div>
                </div>
                <div style="width: 100%;height: 35px;line-height: 35px;padding-left: 10px;border-bottom: #cfcfcf solid 1px;border-top: #cfcfcf solid 1px;background: #BFEFFF;">
                    议题月份分类统计
{#                    <span style="float: right;margin-right: 15px;">#}
{#                        <a href="#"><i class="iconfont icon-gengduo1" style="color: #00a0e9;"></i> 详情</a>#}
{#                    </span>#}
                </div>
                <div style="width: 100%;height: 43%;text-align: center;">
                    <div id="main" style="height: 100%;padding-top: 15px;"></div>
                </div>
            </div>
        </div>

        <div style="width: 98.5%;height: 50%;margin-top: 10px;border: #cfcfcf solid 1px;background: white;margin-left: 0.8%;">
            <div style="width: 100%;height: 35px;line-height: 35px;padding-left: 10px;border-bottom: #cfcfcf solid 1px;background: #BFEFFF;">
                议题部门申请统计
{#                <span style="float: right;margin-right: 15px;">#}
{#                    <a href="#"><i class="iconfont icon-gengduo1" style="color: #00a0e9;"></i> 详情</a>#}
{#                </span>#}
            </div>
            <div style="width: 100%;height: 95%;">
                <div id="bm_apply" style="height: 100%;"></div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
{#    <script src="../../static/personnel/js/xm-select.js"></script>#}
    <script src="../../static/personnel/js/jquery-1.11.1.min.js"></script>
    <script src="../../static/personnel/js/jquery.searchableSelect.js"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("personage").className = "add_class";
            document.getElementById("yiti_report").className = "add-nav-active";
            document.getElementById("SystemReport").style.display='block';
            document.getElementById("ReportIco").className = "iconfont icon-jiantou-xia";
            left_div();MonthlyStatistics();NumberOfIssues();bm_echart();
        };
        function to_detail() {
            var year = $("#year").val();
            var month = $("#month").val();
            var dept = $("#dept").val();
            var local_host = window.location.host;
            window.open("/personnel/issue_detail");
        }
        function search_data() {
            var year = $("#year").val();
            var month = $("#month").val();
            var dept = $("#dept").val();
            console.log(year, month, dept)
            var local_host = window.location.host;
            window.location.href = "/personnel/issue_statement.html?year=" + year + "&month=" + month + "&dept=" + dept
        }

        function left_div() {
            var dom = document.getElementById('container');
            var myChart = echarts.init(dom, null, {
                renderer: 'canvas',
                useDirtyRect: false
            });
            var option;
            const data = genData();
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    }
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 20,
                    bottom: 20,
                    data: data.legendData,
                    padding:[0,30,0,0]
                },
                series: [
                    {
                        name: '议题',
                        type: 'pie',
                        radius: '55%',
                        center: ['40%', '50%'],
                        data: data.seriesData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                    ]
            };

            function genData() {
                const legendData = ["院长办公会议题", "党委会议题", "行政例会议题"];
                const seriesData = [
                    { name: '院长办公会议题', value: {{ yb_count | safe }} },
                    { name: '党委会议题', value: {{ db_count | safe }} },
                    { name: '行政例会议题', value: {{ xz_count | safe }} }
                ];

                return {legendData: legendData, seriesData: seriesData};
            }

            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
            window.addEventListener('resize', myChart.resize);
        }
        
        function MonthlyStatistics() {
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                legend: {},
                tooltip: {},
                dataset: {
                    source: {{ fl_data | safe }}
                },
                grid:{ // 让图表占满容器
                  top:"50px",
                  left:"80px",
                  right:"80px",
                  bottom:"20px"
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    }
                },
                xAxis: { type: 'category' },
                yAxis: {},
                series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
            };
            option && myChart.setOption(option);
        }

        // 议题数统计图
        function NumberOfIssues() {
            var chartDom = document.getElementById('IssuesNumber');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: {{ yf_list | safe }}
                },
                yAxis: {
                    type: 'value'
                },
                grid:{ // 让图表占满容器
                  top:"20px",
                  left:"80px",
                  right:"80px",
                  bottom:"35px"
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    }
                },
                tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                    trigger: 'axis',
                    backgroundColor: 'rgba(32, 33, 36,.7)',
                    borderColor: 'rgba(32, 33, 36,0.20)',
                    borderWidth: 1,
                    textStyle: { // 文字提示样式
                        color: '#fff',
                        fontSize: '12'
                    },
                    axisPointer: { // 坐标轴虚线
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }

                    },
                },
                series: [
                    {
                        data: {{ data_list | safe }},
                        type: 'line',
                        areaStyle: {}
                    }

                ]
            };
            option && myChart.setOption(option);
        }

        // 部门申请统计图
        function bm_echart() {
            var chartDom = document.getElementById('bm_apply');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                xAxis: {
                    type: 'category',
                    data: {{ dep_list | safe }},
                    axisLabel: {
                        rotate: 40
                    }
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                    trigger: 'axis',
                    backgroundColor: 'rgba(32, 33, 36,.7)',
                    borderColor: 'rgba(32, 33, 36,0.20)',
                    borderWidth: 1,
                    textStyle: { // 文字提示样式
                        color: '#fff',
                        fontSize: '12'
                    },
                    axisPointer: { // 坐标轴虚线
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }

                    },
                },
                grid:{ // 让图表占满容器
                    left:"80px",
                    right:"80px",
                    bottom:"100px"
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    }
                },
                series: [
                    {
                        data: {{ dep_number_list | safe }},
                        type: 'bar'
                    }

                ]
            };
            option && myChart.setOption(option);
        }

        function select_and_search() {
            xmSelect.render({
                el: '#selectDemo',
                checkbox: true,
                repeat: false,
                autoRow: true,
                filterable: true,
                prop: {name: 'name', value: 'value',},
                height: '200px',
                tips: '请选择',
                tree: {
                    show: true,
                    showFolderIcon: true,
                    showLine: true,
                    indent: 20,
                    expandedKeys: [-3],
                    strict: false,
                },
                data: function () {
                    return {{ dep_dict_list | safe }};

                },
                on: function (data) {
                    var arr = data.arr;                     //arr:  当前多选已选中的数据
                    console.log("data: ", arr)
                    var li_list = document.getElementsByClassName("xm-icon-duox")
                    for (var i=0; i<li_list.length; i++) {
                        console.log(li_list[i].selected)
                    }
                },
            });
        }

        $(function(){
            $('select').searchableSelect();
        });
    </script>
{% endblock %}
